import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {Input, Slider, Radio, Select} from 'antd';
import Ajax from '../../common/ajax';
import SlideInput from '../../common/SlideInput/index';

const RadioGroup = Radio.Group;
const Option = Select.Option;

class WaiterListOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {}
        }
    };


    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
            storeList: [],
        };
    }

    render() {
        var {storeList, data} = this.state;
        var {style, dataset, layout = '0', data = {}} = data;
        var curStoreId = data.storeId || '0';
        var {title = '技师风采', showTitle = '', canAppoint = 'true'} = data;
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);

        return (
            <div className="optsPanel">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">链接到</label>
                    <div className="optsPanel__item__bd">
                        {
                            storeList && storeList.length > 0 ?
                                <Select
                                    value={curStoreId}
                                    style={{width: 120}}
                                    onSelect={(v) => {
                                        this.$dataChange('storeId', v, 'data');
                                    }}
                                >
                                    <Option value='0'>全部</Option>
                                    {
                                        storeList.map(function (block) {
                                            return (
                                                <Option key={block.id} value={block.id}>{block.title}</Option>
                                            )
                                        })
                                    }
                                </Select>
                                :
                                null
                        }
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">布局</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup onChange={(e) => {
                            this.$dataChange('layout', e.target.value, false);
                        }} value={layout}>
                            <Radio value={0}>单行滚动</Radio>
                            <Radio value={1}>瀑布流</Radio>
                        </RadioGroup>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">是否显示标题</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup onChange={(e) => {
                            this.$dataChange('showTitle', e.target.value, 'data');
                        }} defaultValue={showTitle}>
                            <Radio value={''}>显示</Radio>
                            <Radio value={'hidden'}>不显示</Radio>
                        </RadioGroup>
                    </div>
                </div>

                {/*<div className="optsPanel__item">*/}
                {/*<label className="optsPanel__item__hd">是否支持预约</label>*/}
                {/*<div className="optsPanel__item__bd">*/}
                {/*<RadioGroup onChange={(e) => {*/}
                {/*this._dataChange('canAppoint', e.target.value, 'data');*/}
                {/*}} defaultValue={canAppoint}>*/}
                {/*<Radio value={'true'}>支持</Radio>*/}
                {/*<Radio value={'false'}>不支持</Radio>*/}
                {/*</RadioGroup>*/}
                {/*</div>*/}
                {/*</div>*/}

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">标题</label>
                    <div className="optsPanel__item__bd">
                        <Input
                            defaultValue={title}
                            onInput={(e) => {
                                var val = e.target.value;
                                this.$dataChange('title', val, 'data');
                            }}
                        />
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} value={marginBottom} onChange={(val) => {
                            this.$dataChange('marginBottom', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <div className="optsPanel__item__bd">
                        <a href="/admin/Employee/technicianList" target="_blank"
                           className="ant-btn-dataMng ant-btn ant-btn-primary ant-btn-lg">数据管理</a>
                    </div>
                </div>

            </div>
        );
    }

    componentDidMount() {
        this._getStoreList();
    }

    //获取技师门店列表
    _getStoreList() {
        var _self = this;

        Ajax.G('/admin/Employee/getStoreList', {}, function (res) {
            var result = res['result'];

            _self.setState({
                storeList: result.storeList
            });
        });
    }


}

export default WaiterListOpts;
